<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🔐 Base64 编解码工具 | 多功能工具箱</title>
    <style>
        :root {
            --primary: #4361ee;
            --primary-hover: #3a56d4;
            --text: #333;
            --text-light: #666;
            --bg: #f8f9fa;
            --bg-card: #ffffff;
            --border: #dee2e6;
            --shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
            --font: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            --radius: 12px;
        }

        [data-theme="dark"] {
            --text: #e9ecef;
            --text-light: #adb5bd;
            --bg: #1a1a2e;
            --bg-card: #16213e;
            --border: #2c3e50;
            --shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: var(--font);
            background-color: var(--bg);
            color: var(--text);
            line-height: 1.6;
            transition: background-color 0.3s ease;
            min-height: 100vh;
            padding: 0;
        }

        header {
            background: var(--primary);
            color: white;
            padding: 1.5rem 2rem;
            text-align: center;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        header h1 {
            margin: 0;
            font-size: 1.8rem;
            font-weight: 600;
        }

        header p {
            margin: 0.5rem 0 0;
            opacity: 0.9;
            font-size: 1rem;
        }

        .back-home {
            display: inline-block;
            margin-top: 1rem;
            color: white;
            text-decoration: none;
            font-size: 0.9rem;
        }

        .back-home:hover {
            text-decoration: underline;
        }

        .theme-toggle {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            padding: 8px 12px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 0.9rem;
            transition: background 0.3s ease;
        }

        .theme-toggle:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        .container {
            max-width: 1000px;
            margin: 2rem auto;
            padding: 0 1rem;
        }

        .tool-card {
            background: var(--bg-card);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: box-shadow 0.3s ease;
        }

        .card-header {
            padding: 1.4rem 1.2rem;
            background: var(--primary);
            color: white;
            font-weight: 600;
            font-size: 1.1rem;
        }

        .card-body {
            padding: 1.6rem;
        }

        .tabs {
            display: flex;
            margin-bottom: 1.5rem;
            border-bottom: 1px solid var(--border);
        }

        .tab {
            padding: 0.8rem 1.5rem;
            cursor: pointer;
            border-bottom: 3px solid transparent;
            font-weight: 500;
            color: var(--text-light);
            transition: all 0.3s ease;
        }

        .tab.active {
            color: var(--primary);
            border-bottom: 3px solid var(--primary);
        }

        .input-group {
            margin-bottom: 1.2rem;
        }

        label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: var(--text);
        }

        textarea {
            width: 100%;
            min-height: 120px;
            padding: 12px;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: var(--bg-card);
            color: var(--text);
            font-family: var(--font);
            resize: vertical;
            transition: border-color 0.3s ease;
        }

        textarea:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.2);
        }

        .btn-group {
            display: flex;
            gap: 0.8rem;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
        }

        .btn {
            flex: 1;
            min-width: 120px;
            padding: 10px 16px;
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 500;
            transition: background-color 0.3s ease;
            text-align: center;
        }

        .btn:hover {
            background-color: var(--primary-hover);
        }

        .btn-outline {
            background-color: transparent;
            color: var(--primary);
            border: 1px solid var(--primary);
        }

        .btn-outline:hover {
            background-color: rgba(67, 97, 238, 0.1);
        }

        .result {
            margin-top: 1rem;
            padding: 1rem;
            background: var(--bg-card);
            border: 1px dashed var(--border);
            border-radius: 6px;
            color: var(--text-light);
            font-size: 0.95rem;
        }

        .footer {
            text-align: center;
            margin-top: 3rem;
            color: var(--text-light);
            font-size: 0.9rem;
            padding-bottom: 2rem;
        }

        @media (max-width: 768px) {
            header {
                padding: 1.2rem;
            }
            header h1 {
                font-size: 1.5rem;
            }
            .theme-toggle {
                top: 0.8rem;
                right: 0.8rem;
                padding: 6px 10px;
            }
            .btn-group {
                flex-direction: column;
            }
            .btn {
                min-width: auto;
            }
        }
    </style>
</head>
<body>

    <button class="theme-toggle" onclick="toggleTheme()">
        🌙 深色模式
    </button>

    <header>
        <h1>🔐 Base64 编解码工具</h1>
        <p>快速进行 Base64 编码与解码 | 纯前端 · 隐私安全 · 离线可用</p>
        <a href="../index.html" class="back-home">← 返回首页</a>
    </header>

    <div class="container">
        <div class="tool-card">
            <div class="card-header">Base64 转换</div>
            <div class="card-body">
                <div class="tabs">
                    <div class="tab active" onclick="switchTab('encode')">编码 (Encode)</div>
                    <div class="tab" onclick="switchTab('decode')">解码 (Decode)</div>
                </div>

                <div id="encode-tab">
                    <div class="input-group">
                        <label for="input-text">输入文本</label>
                        <textarea id="input-text" placeholder="请输入要编码的文本..."></textarea>
                    </div>
                    <div class="btn-group">
                        <button class="btn" onclick="encodeText()">开始编码</button>
                        <button class="btn btn-outline" onclick="clearInput()">清空</button>
                        <button class="btn btn-outline" onclick="copyResult()">复制结果</button>
                    </div>
                    <div class="result" id="encode-result">
                        编码结果将显示在这里...
                    </div>
                </div>

                <div id="decode-tab" style="display: none;">
                    <div class="input-group">
                        <label for="decode-input">Base64 字符串</label>
                        <textarea id="decode-input" placeholder="请输入要解码的 Base64 字符串..."></textarea>
                    </div>
                    <div class="btn-group">
                        <button class="btn" onclick="decodeText()">开始解码</button>
                        <button class="btn btn-outline" onclick="clearDecodeInput()">清空</button>
                        <button class="btn btn-outline" onclick="copyDecodeResult()">复制结果</button>
                    </div>
                    <div class="result" id="decode-result">
                        解码结果将显示在这里...
                    </div>
                </div>
            </div>
        </div>

        <div class="footer">
            <p>© 2025 Base64 工具 | 所有操作在本地完成，您的数据永不离开设备</p>
        </div>
    </div>

    <script>
        // 主题切换
        function toggleTheme() {
            const body = document.body;
            const btn = document.querySelector('.theme-toggle');
            if (body.getAttribute('data-theme') === 'dark') {
                body.removeAttribute('data-theme');
                btn.textContent = '🌙 深色模式';
                localStorage.setItem('theme', 'light');
            } else {
                body.setAttribute('data-theme', 'dark');
                btn.textContent = '☀️ 浅色模式';
                localStorage.setItem('theme', 'dark');
            }
        }

        // 标签页切换
        function switchTab(tab) {
            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
            document.querySelectorAll('.tab')[tab === 'encode' ? 0 : 1].classList.add('active');
            document.getElementById('encode-tab').style.display = tab === 'encode' ? 'block' : 'none';
            document.getElementById('decode-tab').style.display = tab === 'decode' ? 'block' : 'none';
        }

        // 编码功能
        function encodeText() {
            const input = document.getElementById('input-text').value.trim();
            if (!input) {
                alert('请输入要编码的文本！');
                return;
            }
            try {
                const encoded = btoa(encodeURIComponent(input).replace(/%([0-9A-F]{2})/g, 
                    function toSolidBytes(match, p1) {
                        return String.fromCharCode('0x' + p1);
                }));
                document.getElementById('encode-result').textContent = encoded;
            } catch (e) {
                document.getElementById('encode-result').textContent = '编码失败：' + e.message;
            }
        }

        // 解码功能
        function decodeText() {
            const input = document.getElementById('decode-input').value.trim();
            if (!input) {
                alert('请输入要解码的 Base64 字符串！');
                return;
            }
            try {
                const decoded = decodeURIComponent(atob(input).split('').map(function(c) {
                    return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
                }).join(''));
                document.getElementById('decode-result').textContent = decoded;
            } catch (e) {
                document.getElementById('decode-result').textContent = '解码失败：输入可能不是有效的 Base64 字符串';
            }
        }

        // 复制结果
        function copyResult() {
            const result = document.getElementById('encode-result').textContent;
            if (result && result !== '编码结果将显示在这里...') {
                navigator.clipboard.writeText(result).then(() => {
                    alert('已复制到剪贴板！');
                }).catch(err => {
                    console.error('复制失败: ', err);
                    alert('复制失败，请手动选择复制');
                });
            }
        }

        function copyDecodeResult() {
            const result = document.getElementById('decode-result').textContent;
            if (result && result !== '解码结果将显示在这里...') {
                navigator.clipboard.writeText(result).then(() => {
                    alert('已复制到剪贴板！');
                }).catch(err => {
                    console.error('复制失败: ', err);
                    alert('复制失败，请手动选择复制');
                });
            }
        }

        // 清空功能
        function clearInput() {
            document.getElementById('input-text').value = '';
            document.getElementById('encode-result').textContent = '编码结果将显示在这里...';
        }

        function clearDecodeInput() {
            document.getElementById('decode-input').value = '';
            document.getElementById('decode-result').textContent = '解码结果将显示在这里...';
        }

        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            // 主题初始化
            const savedTheme = localStorage.getItem('theme');
            if (savedTheme === 'dark') {
                document.body.setAttribute('data-theme', 'dark');
                document.querySelector('.theme-toggle').textContent = '☀️ 浅色模式';
            }

            // 设置编码输入框焦点
            document.getElementById('input-text').focus();
        });
    </script>
</body>
</html>